<div class="animated fadeIn">

  <div class="row container-fluid">

    <div class="form-group col-md-5" >

      <select name="select" class="form-control" [(ngModel)]="saveDate.key">
        <option value="1">账号</option>
        <option value="2">姓名</option>
      </select>

    </div>

    <div class="form-group col-md-3">
      <input *ngIf="saveDate.key == 1" type="text" class="form-control input-down btn-radius" name="number" [(ngModel)]="saveDate.account">

      <input *ngIf="saveDate.key == 2" type="text" class="form-control input-down btn-radius" name="number" [(ngModel)]="saveDate.name">
    </div>




    <!--查询-->
    <div class="form-group col-md-1" style="padding-left:5px">
      <button type="button" class="btn btn-primary btn-radius" (click)="getPersonDate()">查询</button>
    </div>

    <div class="col-md-1"></div>

    <!--新增按钮-->
    <div class="form-group col-md-1" style="padding-left:5px">
      <button type="button" class="btn btn-success btn-radius" routerLink="add">新增运营人员</button>
    </div>


  </div>

  <div class="table-responsive" style="margin-top: 20px">
    <table class="table table-center table-bordered table-hover" style="min-width: 0px">
      <thead class="table-inverse">
      <tr class="text-nowrap">
        <td>序号</td>
        <td>账号</td>
        <td>姓名</td>
        <td>角色</td>
        <td>新增时间</td>
        <td>操作</td>
      </tr>
      </thead>
      <tbody class="tab-content">
        <tr class="text-nowrap" *ngFor="let item of personDataArr let i=index">
          <td>{{i+1}}</td>
          <td>{{item.account}}</td>
          <td>{{item.name}}</td>
          <td>
            <span *ngFor="let tem of rolesDataArr let i = index"><span *ngIf="item.type == tem.id">{{tem.name}}</span></span>
          </td>
          <td>{{item.addTime*1000 | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
          <td class="text-nowrap">
            <a  *ngIf="item.id != 1 " [routerLink]="['edit/',item.id]">编辑</a>
            <span class="removeBtn" *ngIf="item.id != 1 " style="margin-left: 10px" (click)="deleteUser(item.id);smallModal.show()">删除</span>
            <a href="javascript:;" style="margin-left: 10px" (click)="getPassData(item.id);inputmodalbox.show()">重置密码</a>
          </td>
        </tr>
      </tbody>
    </table>
    <p class="noneData" *ngIf="!personDataArr.length">暂无数据</p>

    <!--分页组件-->
    <div style="float: right">
      <pagination [boundaryLinks]="true" [totalItems]="totalItems" [(ngModel)]="currentPage" itemsPerPage="10" [maxSize]="maxSize" previousText="上一页" nextText="下一页" firstText="首页" lastText="末页" (pageChanged)="pageChanged($event)"></pagination>
    </div>
  </div>

</div>


<div bsModal #smallModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-primary modal-sm" [ngClass]="{'modal-danger': resetOrDel, 'modal-primary':!resetOrDel}" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">提示</h5>
        <button type="button" class="close" (click)="smallModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="text-align: center" >
        <p style="margin: 0px" >{{modalText}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="smallModal.hide()">取消</button>
        <button  (click)="smallModal.hide()" type="button" class="btn btn-primary" [ngClass]="{'btn-danger': resetOrDel, 'btn-primary':!resetOrDel}"  (click)="smallModal.hide();defineOperate();" >确定</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>


<div *ngIf="dangerModal" [config]="{ show: true }" (onHidden)="hideModal()" bsModal #autoShownModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-sm" [ngClass]="{'modal-danger': !issuccess, 'modal-success':issuccess}">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left">提示</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="hideModal()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="text-align: center;">
        <p style="margin: 0px">{{successText}}</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn " [ngClass]="{'btn-success':issuccess,'btn-danger':!issuccess}" (click)="hideModal();">确定</button>
      </div>
    </div>
  </div>
</div>

<!--重置密码模态框-->
<div bsModal #inputmodalbox="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-primary modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">重置密码</h5>
        <button type="button" class="close" (click)="inputmodalbox.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" style="text-align: center" >
        <div class="row">
          <span class="text-line">输入密码：</span>
          <div>
            <input type="text"  class="btn-radius form-control" placeholder="请输入密码" [(ngModel)]="resetPass" name="name1" maxlength="10">
          </div>
        </div>
        <div class="row">
          <span class="text-line">确认密码：</span>
          <div>
            <input type="text"  class="btn-radius form-control"  placeholder="请确认密码" [(ngModel)]="resetConfirm" name="name2" maxlength="10">
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button"  class="btn btn-secondary" (click)="inputmodalbox.hide()">取消</button>
        <button type="button" class="btn btn-primary" (click)="inputmodalbox.hide();addmodify();">完成</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>
